<template>
  <div class="index">
    <searchInput/>
    <!-- 轮播 -->
    <swiper indicator-dots autoplay class="index_swiper">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <img :src="item.image_src" alt=""/>
      </swiper-item>
    </swiper>
  </swiper>
  <!-- 分类 -->
  <div class="index_cate">
    <div v-for="(item,index) in cateList" :key="index">
        <img :src="item.image_src" alt=""/>
    </div>
  </div>
  <!-- 楼层 -->
  <div class="index_floor" v-for="(item1,index1) in floorList" :key="index1">
    <div class="floor_group">
      <!-- 标题 -->
      <div class="floor_title">
        <img :src="item1.floor_title.image_src" alt=""/>
      </div>
      <!-- 内容 -->
      <div class="floor_list">
        <div v-for="(item2,index2) in item1.product_list" :key="index2" class="navigator">
          <img :src="item2.image_src" alt=""/>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import {request} from '@/utils/tools'
import searchInput from '@/components/searchInput'
export default {
  components: { searchInput },
  data() {
    return {
      interval: 1000,
      swiperList: [],
      cateList: [],
      floorList: []
    };
  },
  methods: {
    // 轮播图
    getSwiperList() {
      console.log('首页-轮播图')
      request({
      url: 'home/swiperdata',
      header: {
        'content-type': 'application/json'
      },
    }).then(res => {
      // console.log(res.data.message)
      let swiperList = res.data.message
      this.swiperList = swiperList
      console.log(swiperListhis);
    })
    },
    // 分类
  getCateList() {
    request({
      url: 'home/catitems',
      header: {
        'content-type': 'application/json'
      },
    }).then(res => {
      // console.log(res)
      this.cateList= res.data.message
    })
  },
  // 底部
  getFloorList() {
    request({
      url: 'home/floordata',
      header: {
        'content-type': 'application/json'
      },
    }).then(res => {
      // console.log(res)
      let floorList = res.data.message
      floorList.forEach(v => {
        v.product_list.forEach(v => {
          v.navigator_url = v.navigator_url.replace(/goods_list/, 'goods_list/main')
          // console.log(v.navigator_url);
        })
      })
      this.floorList = floorList 
    })
  }
  },
  created() {
    this.getSwiperList()
    this.getCateList()
    this.getFloorList()
  }
};
</script>

<style lang='less' scoped>
text {
  color: var(--themeColor);
}
// 轮播
.index_swiper {
  width: 750rpx;
  height: 340rpx;
  img {
    width: 100%;
  }
}
// 分类
.index_cate {
  display: flex;
  width: 750rpx;
  height: 210rpx;
  >div {
    padding: 20rpx;
    flex: 1;
    >img {
      width: 100%;
      height: 100%;
    }
  }
}
// 楼层
.index_floor {
  width: 750rpx;
  .floor_group {
    width: 100%;
    // 标题
    .floor_title {
      width: 100%;
      padding: 10rpx 0;
      >img {
        width: 100%;
        height: 60rpx;
      }
    }
    // 图片列表区
    .floor_list {
      // 清除浮动--正常方法
      overflow: hidden;
      .navigator {
        float: left;
        width: 33%;
        &:nth-child(1){
          // 第1张图片232px*386px
          height: 33.3vw * 386/232;
        }
        // 后4张
        &:nth-last-child(-n + 4) {
          height: 33.3vw * 386/232/2;
          border-left: 5px solid #fff;
        }
        &:nth-child(2),
        &:nth-child(3) {
          border-bottom: 5px solid #fff;
        }
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
 
